'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { copyToClipboard } from '@/lib/utils'
import { Copy, RotateCcw, Type } from 'lucide-react'

type CaseType = 'camelCase' | 'PascalCase' | 'snake_case' | 'kebab-case' | 'UPPER_CASE' | 'lower case' | 'Title Case' | 'Sentence case'

interface ConversionResult {
  type: CaseType
  result: string
  description: string
}

export default function CaseConverterPage() {
  const [input, setInput] = useState('')
  const [copySuccess, setCopySuccess] = useState<string | null>(null)

  const convertText = (text: string, caseType: CaseType): string => {
    if (!text) return ''
    
    switch (caseType) {
      case 'camelCase':
        return text
          .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => 
            index === 0 ? word.toLowerCase() : word.toUpperCase()
          )
          .replace(/\s+/g, '')
          .replace(/[^a-zA-Z0-9]/g, '')
      
      case 'PascalCase':
        return text
          .replace(/(?:^\w|[A-Z]|\b\w)/g, word => word.toUpperCase())
          .replace(/\s+/g, '')
          .replace(/[^a-zA-Z0-9]/g, '')
      
      case 'snake_case':
        return text
          .toLowerCase()
          .replace(/\s+/g, '_')
          .replace(/[^a-z0-9_]/g, '')
          .replace(/_+/g, '_')
          .replace(/^_|_$/g, '')
      
      case 'kebab-case':
        return text
          .toLowerCase()
          .replace(/\s+/g, '-')
          .replace(/[^a-z0-9-]/g, '')
          .replace(/-+/g, '-')
          .replace(/^-|-$/g, '')
      
      case 'UPPER_CASE':
        return text
          .toUpperCase()
          .replace(/\s+/g, '_')
          .replace(/[^A-Z0-9_]/g, '')
          .replace(/_+/g, '_')
          .replace(/^_|_$/g, '')
      
      case 'lower case':
        return text.toLowerCase()
      
      case 'Title Case':
        return text.replace(/\w\S*/g, (txt) => 
          txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
        )
      
      case 'Sentence case':
        return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()
      
      default:
        return text
    }
  }

  const conversions: ConversionResult[] = [
    {
      type: 'camelCase',
      result: convertText(input, 'camelCase'),
      description: '首字母小写的驼峰命名，常用于JavaScript变量'
    },
    {
      type: 'PascalCase',
      result: convertText(input, 'PascalCase'),
      description: '首字母大写的驼峰命名，常用于类名'
    },
    {
      type: 'snake_case',
      result: convertText(input, 'snake_case'),
      description: '下划线分隔的小写命名，常用于Python'
    },
    {
      type: 'kebab-case',
      result: convertText(input, 'kebab-case'),
      description: '连字符分隔的小写命名，常用于CSS类名'
    },
    {
      type: 'UPPER_CASE',
      result: convertText(input, 'UPPER_CASE'),
      description: '下划线分隔的大写命名，常用于常量'
    },
    {
      type: 'lower case',
      result: convertText(input, 'lower case'),
      description: '全小写文本'
    },
    {
      type: 'Title Case',
      result: convertText(input, 'Title Case'),
      description: '每个单词首字母大写'
    },
    {
      type: 'Sentence case',
      result: convertText(input, 'Sentence case'),
      description: '句子格式，仅首字母大写'
    }
  ]

  const handleCopy = async (text: string, type: string) => {
    if (text) {
      const success = await copyToClipboard(text)
      if (success) {
        setCopySuccess(type)
        setTimeout(() => setCopySuccess(null), 2000)
      }
    }
  }

  const handleClear = () => {
    setInput('')
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">
            大小写转换工具
          </h1>
          <p className="text-gray-600">
            支持多种编程命名规范的文本大小写转换
          </p>
        </div>

        {/* Input Section */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <label className="text-sm font-medium text-gray-700">
              输入文本
            </label>
            <Button variant="outline" size="sm" onClick={handleClear}>
              <RotateCcw className="w-4 h-4 mr-2" />
              清空
            </Button>
          </div>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="请输入要转换的文本，例如：hello world 或 HelloWorld"
            className="w-full h-32 p-4 border border-gray-300 rounded-lg text-sm resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>

        {/* Results Section */}
        <div className="space-y-4">
          <h2 className="text-xl font-semibold text-gray-900 mb-4">
            转换结果
          </h2>

          <div className="grid gap-4">
            {conversions.map((conversion) => (
              <div key={conversion.type} className="border border-gray-200 rounded-lg p-4">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <Type className="w-4 h-4 text-gray-500" />
                    <span className="font-medium text-gray-900">
                      {conversion.type}
                    </span>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleCopy(conversion.result, conversion.type)}
                    disabled={!conversion.result}
                  >
                    <Copy className="w-4 h-4 mr-2" />
                    {copySuccess === conversion.type ? '已复制' : '复制'}
                  </Button>
                </div>

                <div className="bg-gray-50 rounded p-3 mb-2">
                  <code className="text-sm font-mono text-gray-800">
                    {conversion.result || '请输入文本进行转换'}
                  </code>
                </div>

                <p className="text-xs text-gray-500">
                  {conversion.description}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Features */}
        <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="text-center p-6 bg-blue-50 rounded-lg">
            <h3 className="font-semibold text-blue-900 mb-2">多种格式</h3>
            <p className="text-blue-700 text-sm">
              支持8种常用的编程命名规范转换
            </p>
          </div>
          <div className="text-center p-6 bg-green-50 rounded-lg">
            <h3 className="font-semibold text-green-900 mb-2">实时转换</h3>
            <p className="text-green-700 text-sm">
              输入即转换，无需点击按钮
            </p>
          </div>
          <div className="text-center p-6 bg-purple-50 rounded-lg">
            <h3 className="font-semibold text-purple-900 mb-2">一键复制</h3>
            <p className="text-purple-700 text-sm">
              每种格式都可以一键复制到剪贴板
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}